<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <title>数据可视化</title>

  <!-- Favicons -->

  <!--external css-->
  <link href="/static/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/static/lib/gritter/css/jquery.gritter.css" />
  <link href="/static/css/style.css" rel="stylesheet">
  <link href="/static/css/style-responsive.css" rel="stylesheet">
  
  <script type="text/javascript" src="/static/js/echarts.min.js"></script>
  <script type="text/javascript" src="/static/js/china.js"></script>
  <script src="/static/lib/jquery/jquery.min.js"></script>
 
   
</head>

<body>
  <section id="container1">
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right"  data-original-title="Toggle Navigation">
           
        </div>
      </div>
      <!--logo start-->
      <a href="index.html" class="logo"><b>BIG<span>DATA</span></b></a>
    <div class="top-menu">
      <ul class="nav pull-right top-menu">
        <li>
          <a class="login" href="/login">登录</a>
          <a class="register" href="/register">注册</a>
         
        </li>
      </ul>
    </div>
    </header>
   
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
          <p class="centered"><img src="/static/img/qidi.jpg" class="img-circle" width="80"></p>
          <h5 class="centered">还没想好小组</h5>
          <li class="mt">
            <a class="active" href="/index">
              <i class="fa fa-dashboard"></i>
              <span>主页面</span>
              </a>
          </li>
         
          <li class="sub-menu">
            <a href="javascript:;">
              <i class=" fa fa-bar-chart-o"></i>
              <span>Charts</span>
              </a>
             <ul class="sub">
        <!-- <li><a href="/">主页面</a></li> -->
              <li><a href="/location">地区分布</a></li>
              <li><a href="/users_count">用户数量统计</a></li>
              <li><a href="/relation">用户关系</a></li>
              <li><a href="/occupation">职业群体分布</a></li>
                <li><a href="/school">教育学校分布</a></li>
              <li><a href="/topic">话题分布</a></li>
              <li><a href="/gender">性别比例分布</a></li>
             
            </ul>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="" fa fa-bar-chart-o"></i>
              <span>Person</span>
              </a>
             <ul class="sub">
     
              <li><a href="/persion">个人用户画像</a></li>
              </ul>
          </li>

          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-book"></i>
              <span>其它</span>
              </a>
             <ul class="sub">
              <li><a href="/login">登录</a></li>
               <li><a href="/register">注册</a></li>
              <li><a href="404.html">404 Error</a></li>
              <li><a href="500.html">500 Error</a></li>
            </ul>
          </li>
          
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
   <div id="container" style="height:550px;width:100%;"></div>

<script type="text/javascript">
    // 全国省份列表
    var dataMap = [{ name: '北京',value:39983}, { name: '天津',value:2647}, { name: '上海',value:24346 }, { name: '重庆',value:2761 }, { name: '河北' ,value:885}, { name: '河南',value:1442 }, { name: '云南',value:589}, { name: '辽宁',value:1503 }, { name: '黑龙江',value:3844}, { name: '湖南',value:2564}, { name: '安徽',value:1023 }, { name: '山东',value:2919 },
    { name: '新疆',value:372 }, { name: '江苏',value:5554}, { name: '浙江',value:5906 }, { name: '江西',value:934 }, { name: '湖北',value:2812 }, { name: '广西',value:462 }, { name: '甘肃',value:227 }, { name: '山西',value:543 }, { name: '内蒙古',value:345 }, { name: '陕西',value:2749 }, { name: '吉林',value:3072 }, { name: '福建',value:2193 }, { name: '贵州',value:212 },
    { name: '广东',value:6375 }, { name: '青海',value:221 }, { name: '西藏',value:39 }, { name: '四川',value:3456 }, { name: '宁夏',value:34 }, { name: '海南',value:152 }, { name: '台湾',value:321 }, { name: '香港',value:1929}, { name: '澳门',value:168 },{name:'南海诸岛钓鱼岛',value:3}]
    // 需要在页面上直接标记出来的城市
    var specialMap = ['上海', '北京', '广东'];
    // 对dataMap进行处理，使其可以直接在页面上展示
    for (var i = 0; i < specialMap.length; i++) {
        for (var j = 0; j < dataMap.length; j++) {
            if (specialMap[i] == dataMap[j].name) {
                dataMap[j].selected = true;
                break;
            }

        }
    }
    // 绘制图表，准备数据
    var option = {
        tooltip: {
            formatter: function (params) {
                var info = '<p style="font-size:18px">' + params.name + '</p><p style="font-size:14px">用户数量：</p>'+params.value
                return info;

            },
            backgroundColor: "#00F5FF",//提示标签背景颜色
            textStyle: { color: "#fff" } //提示标签字体颜色
        },
        series: [
            {
                name: '中国',
                type: 'map',
                mapType: 'china',
                selectedMode: 'multiple',
                label: {
                    normal: {
                        show: true,//显示省份标签
                        textStyle:{color:"purple"}//省份标签字体颜色
                    },
                    emphasis: {
                        show: true,//对应的鼠标悬浮效果
                        textStyle:{color:"#800080"}
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: '#009fe8',//区域边框颜色
                        areaColor:"#87CEFA",//区域颜色
                    },
                    emphasis: {
                        borderWidth: .5,
                        borderColor: '#4b0082',
                        areaColor: "#ff0000",
                    }
                },
                data: dataMap
            }
        ]
    };
   
 //初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);

</script>
<br>
<br>
<div id="user" style="width:50%px;height:550px;"></div>
      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        function loadColumn(){
           var myChart = echarts.init(document.getElementById('user'));
           //显示标题，图例和空的坐标轴
           myChart.setOption({
             color:['#ff7d27','#47b73d', '#57a2fd','#FFB6C1','#DC143C','#FFF0F5','#FF69B4','#D8BFD8','#FF00FF','#8B008B','#9400D3','#7B68EE','#87CEEB','#ADD8E6','#2F4F4F','#008080','#F8F8FF','#3CB371','#228B22','#808000','#FFFACD','#FFA500','#FFEBCD','#E9967A','#FF0000','#FFFAFA','  #FF7F50','#CD853F','#DEB887','#FFD700','#808000','#4B0082','#2E8B57','#20B2AA','#00FFFF','#B0E0E6'],//饼图颜色
             title : {
                 text: '全国的知乎用户比例',
                 // subtext: '纯属虚构',
                 x:'center'
              },
              tooltip : {
                 trigger: 'item',
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ['北京','上海','广东','浙江省','江苏省','黑龙江省','四川省','吉林省','山东省','湖北省','重庆','陕西省','天津','湖南省','福建省','香港特别行政区','辽宁省','河南省','安徽省','江西省','河北省','云南省','山西省','广西壮族自治区','新疆维吾尔自治区','内蒙古自治区','台湾','甘肃省','青海省','贵州省','澳门特别行政区','海南省','西藏自治区','宁夏回族自治区','钓鱼岛']
              },
              toolbox:{
                  show:true,
                  feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{
                      show:true,
                      type:['pip','gunnel'],
                      option:{
                        funnel:{
                          x:'25%',
                          width:'40%',
                          funnelAlign:'left',
                        }
                      }
                    },
                    restore:{show:true},
                    saveAslmage:{show:true}
                  }
                },
                series : [{
                    name: '数据来源：province_user_count',
                    type: 'pie',
                    radius : '55%',
                    center: ['55%', '55%'],
                    data:[]
                }]
           });
           myChart.showLoading();//数据加载完之前先显示一段简单的loading动画
           var names=[];//类别数组{用于存放饼图的类别}
           var brower=[];
           $.ajax({
             type: 'get',
             url: 'static/json/province_user_count.txt',//请求数据的地址
             dataType: "json",        //返回数据形式为json
             success: function (result) {
           $.each(result.list, function (index, item) {
              names.push(item.省份);    //挨个取出类别并填入类别数组 
              brower.push({
              name: item.省份,
              value: item.数量
                  });
               });
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表                
                legend: {                    
                    data: names
                },
                series: [{                    
                    data: brower
                }]
              });
            },
          error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
};
loadColumn();
</script>

<br>
<br>
<br>

  <div id="main1" style="width:69%;height:400px;"></div>
  
   <script type="text/javascript">
          function loadOneColumn(){
             var myChart = echarts.init(document.getElementById('main1'));
             myChart.setOption({
                title:{
                  text: '全国知乎用户数量最多的前八省',
                  subtext:'数据来自province_user_count'
              },
              tooltip:{},
              legend:{
                data:['知乎的用户数量']
              },
              xAxis : [
                  {
                    // data : ["北京","上海","广东省","浙江省","江苏省","黑龙江省","四川省","吉林省"]
                    data:[]
                   }
                 ],
              yAxis: {
                splitLine:{show:false},//去掉网格线

              },
              series : [
                  { 
                    barWidth:"50px",
                    name:'知乎用户数量',
                    type:'bar',
                    itemStyle: {
                     normal: {
                      label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#40E0D0'
                        }
                      }
                    }
                },
                data:[]
                }]
            });
      myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
      var names = [];    //类别数组（实际用来盛放X轴坐标值）
      var nums = [];    //销量数组（实际用来盛放Y坐标值）
      $.ajax({
        type: 'get',
        url: 'static/json/province_users.txt',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.list, function (index, item) {
                names.push(item.省份);    //挨个取出类别并填入类别数组                    
                nums.push(item.数量);    //挨个取出销量并填入销量数组
            });
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '知乎用户数量',  //显示在上部的标题
                    data: nums
                }]
            });
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
};
loadOneColumn();
    </script>

   </section>
   </section>
     <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p align="center">
          &copy;<strong>Big data</strong>&nbsp;&nbsp;.&nbsp;&nbsp;还没想好小组
        </p>
       
        <a href="/index" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
</section>
  <!-- js placed at the end of the document so the pages load faster -->
 
  <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="/static/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="/static/lib/jquery.scrollTo.min.js"></script>
  <script src="/static/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <!--common script for all pages-->
  <script src="/static/lib/common-scripts.js"></script>
  <script type="text/javascript" src="/static/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="/static/lib/gritter-conf.js"></script>
  <!--script for this page-->
 

  <script type="text/javascript">

    //进入界面后的弹窗
    $(document).ready(function() {
      var unique_id = $.gritter.add({
       
        title: 'Welcome to Big Data!',
       
        text: 'Hover me to enable the Close Button. You can hide the left sidebar clicking on the button next to the logo.',
       
        image: '/static/img/qidi.jpg',
       
        sticky: false,
      
        time: 8000,
       
        class_name: 'my-sticky-class'
      });

      return false;
    });
  </script>
 
</body>

</html>
